<template>
	<view>
		<!-- 状态栏占位符h5 -->
		<view class="status_bar"></view>
		
		<!-- #ifdef MP -->
		<!-- 微信小程序胶囊区域占位 -->
		<view class="" :style="{'height':navibarHeight+'px'}" />
		<!-- #endif -->
		
	</view>
</template>

<script>
	export default {
		name:"top-navi",
		data() {
			return {
				navibarHeight: 0,
			};
		},
		mounted() {
			// #ifdef MP
			uni.getSystemInfo({
				success: (r) => {
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					let statusBarHeight = r.statusBarHeight;
					this.navibarHeight = menuButtonInfo.height + (menuButtonInfo.top -
						statusBarHeight) * 2;
				}
			})
			// #endif
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>